<template>
  <div class="header">
    <div class="logo-box"></div>
    <div class="header-nav">
      <ul>
        <li
          v-for="(item, index) in menus"
          :key="index"
          :class="['menu_item', curpage, curpage == item.sid ? 'ul-item-active' : 'ul-item']"
          @click="handleItemClick(item.path, item.sid)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <span @click="handleLogOut">
        <img src="@/assets/images/home/logout.png" />
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { localCache } from '@/utils/cache'

// const curpage = ref('index')
const router = useRouter()
const curpage = ref(router.currentRoute.value.name)
// curpage.value = router.currentRoute.value.name

const menus = [
  {
    sid: 'index',
    name: '首页',
    path: '/Index',
    isShow: true
  },
  {
    sid: 'model',
    name: '模型管理',
    path: '/Model',
    isShow: true
  },
  {
    sid: 'computeMethods',
    name: '计算方案',
    path: '/ComputeMethods',
    isShow: true
  },
  {
    sid: 'dispatchManage',
    name: '预报调度',
    path: '/DispatchManage',
    isShow: true
  },
  {
    sid: 'modelExam',
    name: '模型考核',
    path: '/ModelExam',
    isShow: true
  },
  {
    sid: 'externalService',
    name: '对外服务',
    path: '/ExternalService',
    isShow: true
  }
]
router.beforeResolve(async (to) => {
  curpage.value = to.name
})

const handleItemClick = (path, sid) => {
  router.push(path)
}
function handleLogOut() {
  ElMessageBox.confirm('确定退出登录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // clearLoginState()
      // getUserData()
      localCache.removeCache('login/token/base')
      localCache.removeCache('login/token')
      router.push('/login')
    })
    .catch(() => {})
}
</script>

<style lang="less" scoped>
.header {
  height: 65px;
  min-width: 800px;
  padding: 0;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(#0475d3, #1b3473);
  border: 0;
  .logo-box {
    width: 400px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
    background-image: url(@/assets/images/logo.png);
  }
  .header-nav {
    display: flex;
    align-items: center;
    height: 65px;
    width: calc(100% - 500px);
    margin-right: 20px;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      .ul-item {
        cursor: pointer;
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        background-image: url(@/assets/images/btn_img.png);
        span {
          color: #fff;
          font-size: 16px;
        }
      }
      .ul-item:hover {
        cursor: pointer;
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        background-image: url(@/assets/images/btn_active_img.png);
        span {
          color: #fff;
          font-size: 16px;
        }
      }
      .ul-item-active {
        cursor: pointer;
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        background-image: url(@/assets/images/btn_active_img.png);

        span {
          color: #fff;
          font-size: 16px;
        }
      }
    }
    span {
      img {
        cursor: pointer;
        width: 32px;
        height: 32px;
      }
    }
  }
}
</style>
